<template>
    <div style="height: 100px;width: 100%;position: absolute;bottom: 0px;left: 0;">
        <css-doodle use="var(--my-cover)"></css-doodle>
    </div>
</template>
<script setup name="FormCover">
/* import it */
import 'css-doodle';
</script>
<style scoped>
css-doodle {
    background-color: var(--system-primary-color);
    --my-cover: (
        @grid: 7 x 2 / 500px 120px;
        @shape: clover 5;
        background: hsla(-@i(*@r(10,255)), @rn(10%,100%),@rn(50%,100%), @r(.1,1));
        transform:
        scale(@rn(.2, 2))
        translate(@m2.@r(±50%));
    )
};
</style>